<template>
  <view class="good-main-wrap">
    <image
      class="bg-main"
      id="bg"
      :src="$IMG_URL + '/uploads/20230530/c1883442afac0c2922eaae0b2c9c5ac6.jpg'"
      @load="onBg"
      mode="widthFix"
    />

    <view
      class="content"
      v-if="list.length > 0"
      :style="{
        height: height,
        paddingTop: 'calc(' + (customBar + 'px') + ' + 100rpx' + ')',
      }"
    >
      <view class="scrap">
        <view class="scrap-left">
          <view class="slider-l">
            <img class="br" src="../img/border-10.png" mode="heightFix" />
          </view>
        </view>
        <view class="scrap-bottom">
          <view class="slider">
            <img class="br" src="../img/border-10.png" mode="heightFix" />
            <img class="br" src="../img/border-10.png" mode="heightFix" />
          </view>
        </view>
        <view class="scrap-right">
          <view class="slider-r">
            <img class="br" src="../img/border-10.png" mode="heightFix" />
          </view>
        </view>
        <view class="scrap-text">
          <text>AITE</text>
          <text>AITE</text>
          <text>AITE</text>
          <text>AITE</text>
        </view>
      </view>
      <view class="touchable-mask"></view>

      <swiper
        class="swiper-goods-group"
        :current="swiperCurrent"
        autoplay
        @transition="transition"
        @animationfinish="animationfinish"
        @change="onChange"
        :duration="duration"
        circular
        :disable-touch="true"
        :touchable="touchable"
        ><swiper-item
          class="swiper-item"
          :class="swiperCurrent != index ? 'mini' : ''"
          v-for="(item, index) in list"
          :key="index"
          ><image
            class="good-img"
            :src="item.cover"
            :lazy-load="true"
            mode="widthFix"
          />
        </swiper-item>
      </swiper>
      <view class="indicate">
        当前第{{ currentBox.index || 0 }}箱, 共{{ total }}箱
      </view>
      <view class="progress">
        <view class="power" :style="'width:' + power + '%;'"></view>
        <view class="text-indicate"
          >本箱剩余：{{ currentBox.box_num.surplus }} /
          {{ currentBox.box_num.total }}</view
        >
      </view>
    </view>
  </view>
</template>
<script>
const systemInfo = uni.getSystemInfoSync();
let menuButtonInfo = {};
// #ifdef MP-WEIXIN || MP-BAIDU || MP-TOUTIAO || MP-QQ
menuButtonInfo = uni.getMenuButtonBoundingClientRect();
// #endif
export default {
  // 建议 创建每个组件时 都添加name属性 标识组件名称
  name: '',
  components: {},
  props: {
    details: {
      type: Object,
      default: () => ({}),
    },
    currentBox: {
      type: Object,
      default: () => ({}),
    },
    total: {
      type: [String, Number],
      default: 0,
    },
  },
  data() {
    return {
      height: '900rpx',
      swiperCurrent: 0,
      duration: 1000,
      changingMove: false,
      touchable: false,
    };
  },
  // 计算属性 适配者模式
  computed: {
    power() {
      return (
        (this.currentBox.box_num.surplus / this.currentBox.box_num.total) * 100
      );
    },
    list() {
      return this.details?.image_list || [];
    },
    // 高度
    customBar() {
      let statusBarHeight = systemInfo.statusBarHeight;
      // #ifndef MP
      return systemInfo.platform == 'android'
        ? statusBarHeight + 50
        : statusBarHeight + 45;
      // #endif
      // #ifdef MP-WEIXIN
      return menuButtonInfo.bottom + menuButtonInfo.top - statusBarHeight;
      // #endif
      // #ifdef MP-ALIPAY
      return statusBarHeight + systemInfo.titleBarHeight;
      // #endif
    },
  },
  // 数据监听
  watch: {},
  /**
   * 生命周期 类似 发布订阅者模式
   * 在实例初始化之前被调用
   */
  beforeCreate() {},
  // 在实例创建完成后被立即调用
  created() {},
  // 在挂载开始之前被调用
  beforeMount() {},
  // 挂载到实例上去之后调用。详见 注意：此处并不能确定子组件被全部挂载，如果需要子组件完全挂载之后在执行操作可以使用nextTick
  mounted() {},
  // 数据更新时调用，发生在虚拟 DOM 打补丁之前
  beforeUpdate() {},
  // 由于数据更改导致的虚拟 DOM 重新渲染和打补丁，在这之后会调用该钩子
  updated() {},
  // 实例销毁之前调用。在这一步，实例仍然完全可用
  beforeDestroy() {},
  // Vue 实例销毁后调用。调用后，Vue 实例指示的所有东西都会解绑定，所有的事件监听器会被移除，所有的子实例也会被销毁。
  destroyed() {},
  methods: {
    // swiper-item左右移动，通知tabs的滑块跟随移动
    transition() {},
    // 切换轮播图
    onChange(ev) {},
    // 由于swiper的内部机制问题，快速切换swiper不会触发dx的连续变化，需要在结束时重置状态
    // swiper滑动结束，分别设置tabs和swiper的状态
    animationfinish(e) {
      this.swiperCurrent = e.detail.current;
    },
    onBg(event) {
      this.height = `${
        systemInfo.screenWidth / (event.detail.width / event.detail.height)
      }px`;
    },
  },
};
</script>
<style lang="scss" scoped>
view,
image {
  max-width: none;
}
.good-main-wrap {
  position: relative;
  width: 100%;
  min-height: 900rpx;

  .scrap {
    position: absolute;
    top: 0;
    height: 0;
    width: 100%;
    height: 100%;
    .scrap-left {
      position: absolute;
      bottom: 66rpx;
      left: 4rpx;
      width: 40rpx;
      height: 47%;
      overflow: hidden;
      // border: 1rpx solid #000;
      border-radius: 0 50rpx 0 0;
      .slider-l {
        display: flex;
        justify-content: flex-start;
        width: 50rpx;
        min-height: 100%;

        animation: slider-translate-left 20s linear 0s infinite normal none;
        .br {
          position: relative;
          left: 10rpx;
          margin: 0 0;
          transform-origin: 0% 100%;
          transform: rotate(90deg);
        }
      }
    }
    .scrap-right {
      position: absolute;
      top: 78rpx;
      right: 6rpx;
      // border: 1rpx solid #000;
      width: 40rpx;
      height: 44.6%;
      overflow: hidden;
      border-radius: 0 0 50rpx 0;
      .slider-r {
        display: flex;
        width: 50rpx;
        min-height: 100%;
        animation: slider-translate-left 20s linear 0s infinite normal none;
        .br {
          position: relative;
          right: -6rpx;
          margin: 0 0;
          transform-origin: 0% 100%;
          transform: rotate(90deg);
        }
      }
    }
    .scrap-bottom {
      position: absolute;
      bottom: 14rpx;
      right: 12rpx;
      width: 66.9%;
      height: 50rpx;
      overflow: hidden;
      // border: 1rpx solid #000;
      border-radius: 0 0 0 66rpx;
      .slider {
        display: flex;
        justify-content: flex-end;
        align-items: center;
        height: 50rpx;
        animation: slider-translate 20s linear 0s infinite normal none;
      }
    }
    .br {
      position: relative;
      top: -1rpx;

      flex-shrink: 0;
      height: 20rpx;
    }
    .scrap-text {
      position: absolute;
      top: 273rpx;
      left: 4rpx;

      text:nth-child(1) {
        --d: 0;
        color: #fff;
      }
      text:nth-child(2) {
        --d: 1;
        --y: -24rpx;
        height: 30rpx;
        opacity: 0.7;
      }
      text:nth-child(3) {
        --d: 2;
        --y: -22rpx;
        height: 28rpx;
        overflow: hidden;
        opacity: 0.5;
      }
      text:nth-child(4) {
        --d: 3;
        height: 24rpx;
        overflow: hidden;
        opacity: 0.2;
      }
      text {
        --y: -20rpx;
        --d: 1;
        position: absolute;
        width: 90rpx;
        color: transparent;
        font-size: 32rpx;
        font-weight: 600;
        letter-spacing: 2rpx;
        transform: scaleY(1.2);
        -webkit-text-stroke: 1rpx #fff;
        transition: all 0.6s;
        animation: translate-text 10s linear 0s infinite alternate forwards;
      }
    }
  }
  .bg-main {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
  }
  .content {
    position: relative;
    z-index: 2;
    width: 100%;
    min-height: 900rpx;
    .touchable-mask {
      position: absolute;
      top: 0;
      left: 0;
      z-index: 1;
      width: 100%;
      height: 100%;
      background-color: rgba(255, 255, 255, 0.01);
    }
    .good-img {
      margin: 0 auto;
      display: block;
      width: 500rpx;
      height: 100%;
      transition: all 1s;
    }
    .swiper-goods-group {
      margin: 0 auto;
      width: 100%;
      height: 500rpx;
      .swiper-item.mini {
        .good-img {
          transform: scale(0.7);
        }
      }
      .swiper-item {
        width: 100%;
        height: 100%;
        // background: #fff;
      }
    }

    .indicate {
      text-align: center;
      font-size: 28rpx;
      font-weight: 800;
      color: #ffffff;
    }
    .progress {
      position: relative;
      margin: 18rpx auto 0;
      padding: 2rpx;
      width: 472rpx;
      height: 52rpx;
      background: rgba(57, 168, 223, 0.4);
      border-radius: 26rpx;
      border: 3rpx solid #32c9ec;
      overflow: hidden;
      .power {
        width: 100%;
        height: 100%;
        border-radius: 22rpx;
        background: #0780e6;
        background-image: linear-gradient(
          135deg,
          rgba(255, 255, 255, 0.15) 25%,
          transparent 25%,
          transparent 50%,
          rgba(255, 255, 255, 0.15) 50%,
          rgba(255, 255, 255, 0.15) 75%,
          transparent 75%,
          transparent
        );
        background-size: 44rpx 44rpx;
        border: 2rpx solid rgba(77, 219, 255, 1);
        box-shadow: 0 8rpx 14rpx 10rpx rgba(255, 255, 255, 0.4) inset;
        animation: progress-bar-stripes 2s linear 0s infinite normal none;
      }
      .text-indicate {
        display: flex;
        justify-content: center;
        align-items: center;
        position: absolute;
        top: 0;
        left: 0;
        z-index: 1;
        width: 100%;
        height: 100%;
        font-size: 26rpx;
        font-weight: 600;
        color: #ffffff;
        text-shadow: 0px 3rpx 6rpx #1d709b;
      }
    }
  }
}

/* 能量条 */
@keyframes progress-bar-stripes {
  from {
    background-position: 0 0;
  }
  to {
    background-position: 44rpx 0;
  }
}

@keyframes slider-translate {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(100%);
  }
}
@keyframes slider-translate-left {
  from {
    transform: translateY(-120%);
  }
  to {
    transform: translateY(100%);
  }
}

/* AITE */
@keyframes translate-text {
  0% {
    transform: translateY(0);
  }
  20% {
    transform: translateY(calc(var(--y) * var(--d)));
  }
  70% {
    transform: translateY(calc(var(--y) * var(--d)));
  }
  90% {
    transform: translateY(0);
  }
  100% {
    transform: translateY(0);
  }
}
</style>
